<template>
	<view class="login-container" :class="{show: show}">
		<view class="login-mask" @click="handleClose"></view>
		<view class="login-content ">
			<view class="login-title">{{ isLogin ? '用户登录' : '用户注册' }}
				<text class="text-gray cuIcon-close close-ic" @click="handleClose">

				</text>
			</view>
			<view class="login-form">
				<view class="login-input">
					<input type="text" placeholder="请输入账号" v-model.trim="username" @blur="handleCheckUsername">
					<view class="login-error" v-if="!usernameValid">{{ usernameErrorMsg }}</view>
				</view>
				<view class="login-input">
					<input type="password" placeholder="请输入密码" v-model.trim="password" @blur="handleCheckPassword">
					<view class="login-error" v-if="!passwordValid">{{ passwordErrorMsg }}</view>
				</view>
				<view class="login-input" v-if="!isLogin">
					<input type="password" placeholder="确认密码" v-model.trim="checkpassword" @blur="handleCheckPasswords">
					<view class="login-error" v-if="!checkPasswordValid">{{ checkpasswordErrorMsg }}</view>
				</view>
				<view v-if="!isLogin">
					<view class="login-input">
						<input type="text" placeholder="请输入手机号" v-model.trim="phone" @blur="handleCheckPhone">
						<view class="login-error" v-if="!phoneValid">{{ phoneErrorMsg }}</view>
					</view>
					<view class="login-input">
						<input type="text" placeholder="请输入邮箱" v-model.trim="email" @blur="handleCheckEmail">
						<view class="login-error" v-if="!emailValid">{{ emailErrorMsg }}</view>
					</view>
					<view v-if="!isLogin">
						<view class="login-input">
							<radio-group @change="genderChange">
								<label class="radio">
									<radio value="1" checked="true" />男
								</label>
								<label class="radio">
									<radio value="0" />女
								</label>
							</radio-group>


						</view>
					</view>
				</view>
				<view class="login-button flex justify-around">
					<button @click="handleLogin">{{ isLogin ? '登录' : '注册' }}</button>
					<button v-if="isLogin" @click="handleShowRegister">注册</button>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		request
	} from '@/common/request.js'
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				// 当前登录框的显示与否
				show: false,
				// 当前的操作，登录还是注册
				isLogin: true,
				// 用户信息
				username: '',
				password: '',
				checkpassword: '',
				phone: '',
				email: '',
				gender: 1,

				// 字段校验
				usernameValid: true,
				passwordValid: true,
				checkPasswordValid: true,
				phoneValid: true,
				emailValid: true,

				// 错误提示
				usernameErrorMsg: '',
				passwordErrorMsg: '',
				checkpasswordErrorMsg: '',
				phoneErrorMsg: '',
				emailErrorMsg: ''
			}
		},
		computed: {
			...mapState(['userInfo'])
		},
		methods: {
			// 将vuex中的LOGIN函数进行映射
			...mapMutations(['LOGIN']),
			handleLogin() {
				if (this.isLogin) {
					if (this.handleCheckUsername() && this.handleCheckPassword()) {
						// 处理登录逻辑
						// console.log('登录成功')
						// console.log(this.username, this.password)
						const username = this.username
						request({
							url: '/login',
							method: 'POST',
							data: {
								username: this.username,
								password: this.password
							}
						}).then(res => {
							// console.log('登陆成功')
							const data = {
								name: username,
								integral: res.integral,
								avatar: res.avatar_url,
								sessionid: res.sessionid
							}
							this.LOGIN(data)
							uni.showLoading({
								title: '登陆中...',
								mask: true
							})
							setTimeout(() => {
								// 模拟登录成功
								uni.hideLoading()
								uni.showToast({
									title: '登录成功',
									icon: 'success'
								})
							}, 1000)
							// console.log(this.userInfo)

						}).catch(e => {

							uni.showLoading({
								title: '登录中...',
								mask: true
							})
							setTimeout(() => {
								// 模拟登录成功
								uni.hideLoading()
								uni.showToast({
									title: '登录失败',
									icon: 'error', //将值设置为 success 或者 ''
									duration: 2000 //持续时间为 2秒
								})
							}, 1000)
							console.error('登陆失败', e)
						})
						this.handleClose()
					}
				} else {
					if (this.handleCheckUsername() && this.handleCheckPassword() && this.handleCheckPasswords() && this
						.handleCheckPhone() && this.handleCheckEmail()) {
						// 处理注册逻辑
						// console.log(this.username, this.password, this.checkpassword, this.gender, this.phone, this.email)
						const data = {
							name: this.username,
							password: this.password,
							phone: this.phone,
							email: this.email,
							gender: this.gender
						}
						request({
							url: '/register',
							method: 'POST',
							data: data,
						}).then(res => {
							uni.showLoading({
								title: '注册中...',
								mask: true
							})
							setTimeout(() => {
								// 模拟登录成功
								uni.hideLoading()
								uni.showToast({
									title: '注册成功',
									icon: 'success'
								})
								this.isLogin = true
							}, 1000)
						}).catch(e => {
							setTimeout(() => {
								// 模拟登录成功
								uni.hideLoading()
								uni.showToast({
									title: '手机号已被注册',
									icon: 'error'
								})
								this.isLogin = true
							}, 1000)
						})
						// console.log('注册成功')
						this.handleClose()
					}
				}
			},
			handleShowRegister() {
				this.isLogin = false
			},
			genderChange(e) {
				this.gender = e.detail.value
			},

			handleClose() {
				this.show = false
				// this.isLogin = false
				this.username = ''
				this.password = ''
				this.checkpassword = ''
				this.phone = ''
				this.email = ''
				this.gender = ''
				this.usernameValid = true
				this.passwordValid = true
				this.phoneValid = true
				this.emailValid = true
				this.genderValid = true
				this.usernameErrorMsg = ''
				this.passwordErrorMsg = ''
				this.phoneErrorMsg = ''
				this.emailErrorMsg = ''
				this.genderErrorMsg = ''
				this.isLogin = true
			},
			handleCheckUsername() {
				if (!this.username) {
					this.usernameErrorMsg = '账号不能为空'
					this.usernameValid = false
					return false
				} else if (this.username.length < 2) {
					this.usernameErrorMsg = '账号长度不能小于3个字符'
					this.usernameValid = false
					return false
				} else {
					this.usernameValid = true
					return true
				}
			},
			handleCheckPassword() {
				if (!this.password) {
					this.passwordErrorMsg = '密码不能为空'
					this.passwordValid = false
					return false
				} else if (this.password.length < 6) {
					this.passwordErrorMsg = '密码长度不能小于6个字符'
					this.passwordValid = false
					return false
				} else {
					this.passwordValid = true
					return true
				}
			},
			handleCheckPasswords() {
				if (this.password !== this.checkpassword) {
					console.log('两次密码不一样')
					this.checkpasswordErrorMsg = '两次密码不一致'
					this.checkPasswordValid = false
					return false
				} else {
					this.checkPasswordValid = true
					return true
				}
			},
			handleCheckPhone() {
				if (!this.phone) {
					this.phoneErrorMsg = '手机号不能为空'
					this.phoneValid = false
					return false
				} else if (!/^1[3456789]\d{9}$/.test(this.phone)) {
					this.phoneErrorMsg = '手机号格式不正确'
					this.phoneValid = false
					return false
				} else {
					this.phoneValid = true
					return true
				}
			},
			handleCheckEmail() {
				if (!this.email) {
					this.emailErrorMsg = '邮箱不能为空'
					this.emailValid = false
					return false
				} else if (!/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(this.email)) {
					this.emailErrorMsg = '请输入正确的邮箱'
					this.emailValid = false
					return false
				} else {
					this.emailValid = true
					return true
				}
			},

		}
	}
</script>

<style lang="scss">
	@import '@/static/css/main.css';

	.login-container {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 9999;
		display: none;
	}

	.login-container.show {
		display: block;
	}

	.login-mask {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
	}

	.close-ic {
		position: absolute;
		right: 6px;
		top: 6px;
	}

	.login-error {
		color: #ff5500;
	}

	.login-content {
		position: absolute;
		width: 86vw;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background-color: #fff;
		overflow: hidden;
		border-radius: 11px;
		background: #e6eef4;
		box-shadow: 21px 21px 27px #bfc6cb,
			-21px -21px 27px #ffffff;
	}

	.login-title {
		position: relative;
		font-size: 20px;
		text-align: center;
		padding: 20px;
	}


	.login-form {
		padding: 20px;
	}

	.login-input {
		margin-bottom: 10px;
	}

	.login-input input {
		width: 100%;
		height: 40px;
		border: none;
		border-bottom: 1px solid #ccc;
		outline: none;
		font-size: 16px;
		padding: 0 10px;
	}

	.login-button {
		margin-top: 20px;
		text-align: center;
	}

	.login-button button {
		width: 40%;
		height: 40px;
		border: none;
		background-color: #007aff;
		color: #fff;
		font-size: 16px;
		border-radius: 5px;
	}
</style>
